<template>
  <div>
    <gantt-elastic ref="elastic" :dynamicStyle="dynamicStyle" :options="options" :tasks="works">
      <div slot="header">
        <el-form inline size="mini">
          <el-form-item>
            <el-button @click="add()">新增规划</el-button>
          </el-form-item>
          <el-form-item label="显示模式:">
            <el-button v-if="options.taskList.display" @click="options.taskList.display=false">隐藏表格</el-button>
            <el-button v-else @click="options.taskList.display=true">显示表格</el-button>
          </el-form-item>

          <el-form-item>
            <el-button @click="goNow">回到现在</el-button>
          </el-form-item>

          <el-form-item label="zoom-Y">
            <el-slider v-model="height" :max="100" :min="7" style="width: 200px"></el-slider>
          </el-form-item>

          <el-form-item label="zoom-X">
            <el-slider v-model="scale" :max="24" :min="19" style="width: 200px"></el-slider>
          </el-form-item>
        </el-form>
      </div>
      <template v-slot:priority="row">
        <dict-tag :options="dict.type.priority" :value="row.task.priority"/>
      </template>
      <template v-slot:workType="row">
        <dict-tag :options="dict.type.work_type" :value="row.task.workType"/>
      </template>
      <template v-slot:status="row">
        <dict-tag :options="dict.type.work_status" :value="row.task.status"/>
      </template>
      <template v-slot:assignee="row">
        <user-and-avatar :userId="row.task.assignee"/>
      </template>
      <template v-slot:operation="row">
        <el-dropdown size="small" split-button type="primary" @click="handleClick(row)">
          查看详情
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <div @click="onUpdate(row)">修改</div>
            </el-dropdown-item>
            <el-dropdown-item>
              <div @click="add(row)">新建</div>
            </el-dropdown-item>
            <el-dropdown-item>
              <div @click="onDelWork(row)">删除</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </gantt-elastic>
    <el-dialog :visible.sync="showWorkInit" title="工作项详情" width="1650px">
      <work-item v-if="showWorkInit" :work-id="workId"></work-item>
    </el-dialog>
    <el-dialog :visible.sync="showUpData" title="修改" width="1650px">
      <update-work @upData="upWorkOK" :work-id="workId"></update-work>
    </el-dialog>
    <el-dialog :visible.sync="showAdd" title="添加子工作项" width="1650px">
      <add-work :item="addWork" :fileList="fileList"></add-work>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAdd = false">取 消</el-button>
        <el-button type="primary" @click="addWorkButton">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import GanttElastic from 'gantt-elastic-h'
import {add, delWork, listAllWork} from "@/api/projectUser/userWork";
import WorkItem from "@/components/Project/workItem.vue";
import AddWork from "@/components/Project/addWork.vue";
import User from "@/views/system/user/index.vue";
import UserAndAvatar from "@/components/UserAndAvatar/index.vue";
import UpdateWork from "@/components/Project/upWork.vue";

let duration = require('dayjs/plugin/duration');
dayjs.extend(duration);
const st = {
  'task-list-header-label': {
    'text-align': 'center',
    width: '100%',
  },
  'task-list-item-value-container': {
    'text-align': 'center',
    width: '100%',
  },
}

export default {
  name: 'plan',
  dicts: ['work_status', 'work_type', 'priority'],
  components: {
    UpdateWork,
    UserAndAvatar,
    User,
    AddWork,
    WorkItem,
    'gantt-elastic': GanttElastic,
  },
  props: {
    projectId: {
      type: [String, Number],
    }
  },
  data() {
    return {
      showWorkInit: false,
      fileList: '',
      addWork: {},
      workId: 0,
      works: [{
        table: '没有规划时会显示的DEMO',
        duration: 0,
      }],
      showUpData: false,
      showAdd: false,
      form: {
        id: '',
        label: '',
        user: '',
        progress: '',
        timeArr: [],
      },
      rules: {
        label: [{required: true, message: '不能为空', trigger: ['blur', 'change']}],
        user: [{required: true, message: '不能为空', trigger: ['blur', 'change']}],
        progress: [{required: true, message: '不能为空', trigger: ['blur', 'change']}],
        timeArr: [{required: true, message: '不能为空', trigger: ['blur', 'change']}],
      },
      // modeRadio: '',
      lastId: 16,
      localScale: 0,

      components: {},
      options: {
        calendar: {
          hour: {
            display: false,
          }
        },
        showLabel: false, // 添加这个配置项
        // maxRows: 2,
        // maxHeight: 500,
        title: {
          label: 'Your project title as html (link or whatever...)',
          html: false,
        },
        row: {
          height: 30,
        },
        chart: {
          progress: {
            bar: false,
          },
          expander: {
            display: true,
          },
        },
        taskList: {
          display: true,
          expander: {
            straight: false,
          },
          columns: [
            {
              id: 1,
              label: 'ID',
              value: 'id',
              width: 70,
              style: st,
            },
            {
              id: 2,
              label: '标题',
              value: 'table',
              width: 200,
              expander: true,
              style: st,

            },
            {
              id: 3,
              label: '负责人',
              slot: 'assignee',
              value: 'assignee',
              width: 100,
              style: st,
            },
            {
              id: 4,
              label: '开始时间',
              value: (task) => dayjs(task.startTime).format('YYYY-MM-DD'),
              width: 90,
              style: st,
            },
            {
              id: 5,
              label: '结束时间',
              value: (task) => dayjs(task.endTime).format('YYYY-MM-DD'),
              width: 90,
              style: st,
            },
            {
              id: 8,
              label: '进度',
              value: 'progress',
              width: 70,
              style: st,
            },
            {
              id: 9,
              label: '类型',
              slot: 'workType',
              width: 70,
              style: st,
            },
            {
              id: 10,
              label: '状态',
              slot: 'status',
              width: 70,
              style: st,
            },
            {
              id: 11,
              label: '优先级',
              slot: 'priority',
              width: 70,
              style: st,
            },
            {
              id: 20,
              label: '操作',
              slot: 'operation',
              width: 130,
              style: st,
            },
          ],
        },
        locale: {
          weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
          months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        },
      },
      dynamicStyle: {},
    };
  },

  computed: {
    height: {
      get() {
        return this.options.row.height;
      },
      set(value) {
        const elastic = this.$refs.elastic;
        elastic.$emit('row-height-change', Number(value));
      },
    },
    scale: {
      get() {
        return this.localScale;
      },
      set(value) {
        const elastic = this.$refs.elastic;
        this.localScale = Number(value);
        elastic.onTimeZoomChange(Number(value));
      },
    },
  },
  mounted() {
    this.getList();
    const elastic = this.$refs.elastic;
    this.localScale = elastic.getTimeZoom();
  },
  methods: {
    handleClick(row) {
      this.workId = row.task.id;
      this.showWorkInit = true;
    },
    upWorkOK() {
      this.showUpData = false;
      this.getList();
    },
    onDelWork(row) {
      console.log(row);
      delWork(row.task.id).then(response => {
        this.$modal.msgSuccess("删除成功");
        this.getList()
      })
    },
    addWorkButton() {
      add(this.addWork).then(response => {
        this.showAdd = false;
        this.getList();
      })
    },
    onUpdate(row) {
      this.workId = row.task.id
      this.showUpData = true;
    },
    add(row) {
      this.addWork = {};
      if (row) {
        this.addWork = {
          parentItemId: row.task.id,
          projectId: Number(this.$route.query.projectId),
        }
      } else {
        this.addWork = {
          parentItemId: 0,
          projectId: Number(this.$route.query.projectId),
        }
      }
      this.showAdd = true;
    },


    goNow(type) {
      const elastic = this.$refs.elastic;
      elastic.goCurrentTime();
    },
    getList() {
      listAllWork(this.projectId, {}).then(response => {
        let dataWork = [];
        response.data.forEach(item => {
          let object = new Object({
                id: item.workItemId,
                table: item.title,
                label: item.title,
                assignee: item.assignee,
                start: new Date(item.startDate).getTime(),
                duration: new Date(item.dueDate).getTime() - new Date(item.startDate).getTime(),
                progress: (((Math.min(item.childCompletedCount / item.childCount, 1) * 100).toFixed(0) * 1.0 || 0) || 0).toString(),
                workType: item.type,
                status: item.status,
                priority: item.priority,
                type: 'milestone',
                collapsed: true,
                style: {
                  base: {
                    fill: '#1EBC61',
                    stroke: '#0EAC51',
                  },
                },
              }
            )
          ;
          if (item.parentItemId > 0) {
            object.parentId = item.parentItemId
          }

          dataWork.push(object);
        })
        if (dataWork.length !== 0)
          this.works = dataWork;
        console.log(this.works);
      })
    }
  },
};
</script>
